@import "modules/color";
@import "modules/function";

@mixin btn-type(
    $bg-color,
    $font-color: #fff,
    $font-size: rpx(32),
    $radius: rpx(20),
    $padding: rpx(25) 0
) {
    background: $bg-color;
    color: $font-color;
    font-size: $font-size;
    padding: $padding;
    border-radius: $radius;

    &.button-hover, &.navigator-hover {
        background-color: transparentize($bg-color, .3);
    }
}

.btn {
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    display: block;

    &:after {
        border: none;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    @include btn-type($main-color);

    &.btn-wx {
        @include btn-type(#41b035);
    }

    .icon, .iconfont {
        vertical-align: middle;
    }

    &.btn-text {
        display: inline-block;
        border: none;
        background: transparent;
        color: $main-color;
        padding-left: rpx(5);
        padding-right: rpx(5);

        &.button-hover, &.navigator-hover {
            background-color: transparentize($main-color, .9);
        }
    }
}
